<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>推广设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
            <el-button type="success" @click="addSetting">
                <i class="el-icon-plus"></i>添加
            </el-button>
        </div>
        <div class="container">
            <div class="handle-box">
                <!--<span>区域：</span>-->
                <!--<el-select v-model="select_province" class="handle-select mr10" placeholder="省"  @change="getProareaList">-->
                <!--<el-option v-for="item in provinceData"  :value="item" ></el-option>-->
                <!--</el-select>-->
                <!--<el-select v-model="select_city" class="handle-select mr10" placeholder="市" @focus="getcityList">-->
                <!--<el-option v-for="(item,key) in cityData" :key="key" :value="item.city"></el-option>-->
                <!--</el-select>-->
                <el-select @change="showStatus" v-model="select_orgType" class="handle-select mr10" placeholder="品牌">
                    <el-option label="DO" value="DIOUO">DO</el-option>
                    <el-option label="贝颜" value="BEIFACE">贝颜</el-option>
                </el-select>
                <!--<el-button type="primary" @click="selectOrgType">查询</el-button>-->
                <el-select style="width: 120px;" @change="timeSelectFn" v-model="searchTime" placeholder="时间类型">
                    <el-option label="下单时间" value="ORDERTIME"></el-option>
                    <el-option label="操作时间" value="ORERATIONTIME"></el-option>
                </el-select>
                <el-date-picker v-model="findStartTimeValue" @change="dataSelectFn" :picker-options="pickerOptAll" type="datetimerange" style="margin-bottom: 20px" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                <el-tag type="danger" size="large" class="fr">{{this.$route.query.city}}</el-tag>
            </div>
            <el-table v-if="activeShow" :data="list" show-summary :summary-method="getSummaries" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="landPageName" label="落地页名称" width="220px"></el-table-column>
                <el-table-column prop="landPageUrl" label="落地页地址">
                    <template slot-scope="scope">
                        <a style="cursor: pointer" target="_blank" :href="scope.row.landPageUrl">预览</a>
                    </template>
                </el-table-column>
                <!--<el-table-column prop="province" label="省" >-->
                <!--</el-table-column>-->
                <!--<el-table-column prop="city" label="市" >-->
                <!--</el-table-column>-->
                <el-table-column prop="orgType" label="品牌" width="60px"></el-table-column>
                <el-table-column prop="dereceiveNum" label="总接收" width="60px"></el-table-column>
                <el-table-column prop="somereceiveNum" label="已接收" width="60px"></el-table-column>
                <el-table-column prop="receiveNum" label="未跟踪" width="60px"></el-table-column>
                <el-table-column prop="tailAfterNum" label="跟踪中" width="60px"></el-table-column>
                <el-table-column prop="invalidNum" label="无效" width="60px"></el-table-column>
                <el-table-column prop="addWechatNum" label="加微" width="60px"></el-table-column>
                <el-table-column prop="errorNum" label="异常" width="60px"></el-table-column>
                <el-table-column prop="repeatNum" label="重复" width="60px"></el-table-column>
                <el-table-column prop="rate" label="通过率" width="60px"></el-table-column>
                <el-table-column prop="rateAll" label="总通过率"></el-table-column>
                <el-table-column label="操作" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">修改</el-button>
                        <!--<el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">加库存</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination v-if="paginationShow" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next" :total="pageNum" :page-sizes="[10, 30, 50]" :page-size="pageSize" :current-page.sync="cur_page" :current-page="cur_page"></el-pagination>
            </div>
        </div>

        <!-- 弹出框 -->
        <el-dialog :visible.sync="addSpreadDialog" width="500px">
            <el-form label-width="120px" ref="addForm_data" :model="addForm_data" class="extend_form">
                <el-form-item label="城市：">
                    <el-input v-model="addForm_data.city" disabled class="ex_input"></el-input>
                </el-form-item>
                <el-form-item label="账号ID：">
                    <!--<el-input v-model='addForm_data.accountId' disabled v-if="ifEdit" class="ex_input"></el-input>-->
                    <el-input v-model="addForm_data.accountId" class="ex_input"></el-input>
                </el-form-item>
                <el-form-item label="账号名称：">
                    <!--<el-input v-model='addForm_data.accountName' disabled v-if="ifEdit" class="ex_input"></el-input>-->
                    <el-input v-model="addForm_data.accountName" class="ex_input"></el-input>
                </el-form-item>
                <el-form-item label="落地页名称：">
                    <!--<el-input v-model='addForm_data.landPageName' disabled v-if="ifEdit" class="ex_input"></el-input>-->
                    <el-input v-model="addForm_data.landPageName" class="ex_input"></el-input>
                </el-form-item>
                <el-form-item label="落地页URL：">
                    <el-input v-model="addForm_data.landPageUrl" class="ex_input"></el-input>
                </el-form-item>
                <el-form-item label="品牌：">
                    <el-select v-model="addForm_data.orgType" class="ex_input" placeholder="品牌" disabled>
                        <el-option label="DO" value="DIOUO">DO</el-option>
                        <el-option label="贝颜" value="BEIFACE">贝颜</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务产品：">
                    <el-input v-model="addForm_data.servingProduct" class="ex_input"></el-input>
                </el-form-item>

                <el-form-item label="推广地址：" v-show="spreadAddress">
                    <div class="copy-blo" style="display: flex;align-items: center;">
                        <el-input v-model="spreadAddress" :value="spreadAddress" id="copyPhone" readonly class="ex_input" style="width: 232px; margin-right: 10px;"></el-input>
                        <el-button :disabled="!spreadAddress" size="mini" type="primary" class="copyBtn" @click="copysPhone()">复制</el-button>
                    </div>
                </el-form-item>
                <!--<el-form-item label="区域：">-->
                <!--<el-select v-model="select_province" class="handle-select mr10" placeholder="省"  @change="getProareaList">-->
                <!--<el-option v-for="item in provinceData"  :value="item" ></el-option>-->
                <!--</el-select>-->
                <!--<el-select v-model="select_city" class="handle-select mr10" placeholder="市" @focus="getcityList" @change="getcityID">-->
                <!--<el-option v-for="(item,key) in cityData" :key="key" :value="item.city"></el-option>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addSpreadDialog = false" v-if="!ifEdit && spreadAddress">关 闭</el-button>
                <el-button @click="addSpreadDialog = false" v-else>取 消</el-button>
                <el-button type="primary" @click="saveEdit" v-if="ifEdit">修 改</el-button>
                <el-button type="primary" @click="saveEdit" v-else-if="!ifEdit && spreadAddress == ''">生 成</el-button>
                <el-button type="primary" @click="saveEdit" :disabled="true" v-else-if="!ifEdit && spreadAddress != ''">生 成</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { SpreadList, storeAsGet, storeAsPost, storeAsPut } from "../api/api"
import { formatDate } from "../tool/tool"
import { base64, tool_confirm } from "../tool/tool"
export default {
    data() {
        return {
            /* 推广地址 */
            spreadAddress: "",
            //时间类型
            searchTime: "ORDERTIME",
            startTime: "",
            endTime: "",
            findStartTimeValue: "",
            salcTotalObj: {},
            //省
            // provinceData: [],
            // select_province: '',
            //市
            // cityData: [],
            select_city: "",
            select_city_id: "",
            //品牌
            select_orgType: "BEIFACE",
            //列表数据
            list: [],
            ifEdit: false,
            //分页
            pageNum: null,
            cur_page: 0,
            pageSize: 10,
            //弹窗
            addSpreadDialog: false,
            //新增设置数据
            addForm_data: {
                //推广账号ID
                accountId: "",
                //账号名称
                accountName: "",
                //落地页名称
                landPageName: "",
                //落地页URL
                landPageUrl: "",
                //品牌
                orgType: "BEIFACE",
                //服务产品
                servingProduct: "",
                //区域id
                promoteArea: {
                    id: ""
                }
            },
            // 提交的数据
            trueForm: {},
            // 查询的id
            spreadId: "",
            paginationShow: true,
            activeShow: true,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            const end = new Date()
                            end.setTime(end.getTime())
                            end.setHours(23)
                            end.setMinutes(59)
                            end.setSeconds(59)
                            console.log(end, 115)
                            end.setTime(end.getTime())
                            const start = new Date()
                            start.setHours(0)
                            start.setMinutes(0)
                            start.setSeconds(0)
                            start.setTime(start.getTime())
                            picker.$emit("pick", [start, end])
                        }
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const end = new Date()
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                            end.setHours(23)
                            end.setMinutes(59)
                            end.setSeconds(59)
                            console.log(end, 115)
                            end.setTime(end.getTime())
                            const start = new Date()
                            start.setHours(0)
                            start.setMinutes(0)
                            start.setSeconds(0)
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 1
                            )
                            picker.$emit("pick", [start, end])
                        }
                    },
                    {
                        text: "最近7天",
                        onClick(picker) {
                            const end = new Date()
                            end.setHours(23)
                            end.setMinutes(59)
                            end.setSeconds(59)
                            end.setTime(end.getTime())
                            const start = new Date()
                            start.setHours(0)
                            start.setMinutes(0)
                            start.setSeconds(0)
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 6
                            )
                            picker.$emit("pick", [start, end])
                        }
                    },
                    {
                        text: "最近30天",
                        onClick(picker) {
                            const end = new Date()
                            end.setHours(23)
                            end.setMinutes(59)
                            end.setSeconds(59)
                            end.setTime(end.getTime())
                            const start = new Date()
                            start.setHours(0)
                            start.setMinutes(0)
                            start.setSeconds(0)
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 29
                            )
                            picker.$emit("pick", [start, end])
                        }
                    },
                    {
                        text: "最近90天",
                        onClick(picker) {
                            const end = new Date()
                            end.setHours(23)
                            end.setMinutes(59)
                            end.setSeconds(59)
                            end.setTime(end.getTime())
                            const start = new Date()
                            start.setHours(0)
                            start.setMinutes(0)
                            start.setSeconds(0)
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 89
                            )
                            picker.$emit("pick", [start, end])
                        }
                    }
                ]
            }
        }
    },
    created() {
        // console.log("created")
        this.dataSelectFn()
        this.getSpreadList(0, 2)
        this.getcityList()
    },
    watch: {
        $route() {
            this.getSpreadList(0, 2)
            this.getcityList()
        }
    },
    computed: {},
    methods: {
        copysPhone() {
            let url = document.getElementById("copyPhone")
            url.select()
            document.execCommand("Copy")
            this.$message.success("复制成功")
        },
        //数据列表
        getSpreadList(curPage, val) {
            this.activeShow = false
            this.paginationShow = false
            this.$nextTick(function() {
                this.activeShow = true
                this.paginationShow = true
            })

            this.salcTotalObj = {
                addWechatNumAll: 0,
                dereceiveNumAll: 0,
                repeatNumAll: 0,
                errorNumAll: 0,
                invalidNumAll: 0
            }

            // console.log(this.$route.query.province,"175")
            if (val == 2) {
                storeAsGet(
                    "/promote/set/page?page=" +
                        curPage +
                        "&size=" +
                        this.pageSize +
                        "&orgType=" +
                        this.select_orgType +
                        "&province=" +
                        this.$route.query.province +
                        "&city=" +
                        this.$route.query.city +
                        "&startTime=" +
                        this.startTime +
                        "&endTime=" +
                        this.endTime +
                        "&timeType=" +
                        this.searchTime
                )
                    .then(res => {
                        this.pageNum = res.data.content.page.totalElements
                        this.list = res.data.content.page.content
                        Array.prototype.slice
                            .call(this.list)
                            .forEach((value, index) => {
                                value.dereceiveNum =
                                    value.receiveNum +
                                    value.addWechatNum +
                                    value.invalidNum +
                                    value.tailAfterNum +
                                    value.errorNum +
                                    value.repeatNum
                                value.somereceiveNum =
                                    value.receiveNum +
                                    value.addWechatNum +
                                    value.invalidNum +
                                    value.tailAfterNum
                                let rateMon =
                                    value.dereceiveNum -
                                    value.repeatNum -
                                    value.errorNum -
                                    value.invalidNum
                                let ratesMon =
                                    value.dereceiveNum -
                                    value.repeatNum -
                                    value.errorNum

                                this.salcTotalObj.addWechatNumAll +=
                                    value.addWechatNum
                                this.salcTotalObj.dereceiveNumAll +=
                                    value.dereceiveNum
                                this.salcTotalObj.repeatNumAll +=
                                    value.repeatNum
                                this.salcTotalObj.errorNumAll += value.errorNum
                                this.salcTotalObj.invalidNumAll +=
                                    value.invalidNum

                                if (
                                    rateMon == 0 ||
                                    value.dereceiveNum == 0 ||
                                    ratesMon == 0
                                ) {
                                    value.rate = Number(0).toFixed(2) + "%"
                                    value.rateAll = Number(0).toFixed(2) + "%"
                                } else {
                                    value.rate =
                                        Number(
                                            (value.addWechatNum /
                                                (value.dereceiveNum -
                                                    value.repeatNum -
                                                    value.errorNum -
                                                    value.invalidNum)) *
                                                100
                                        ).toFixed(2) + "%"
                                    value.rateAll =
                                        Number(
                                            (value.addWechatNum /
                                                (value.dereceiveNum -
                                                    value.repeatNum -
                                                    value.errorNum)) *
                                                100
                                        ).toFixed(2) + "%"
                                }
                                switch (value.orgType) {
                                    case "BEIFACE":
                                        value.orgType = "贝颜"
                                        break
                                    case "DIOUO":
                                        value.orgType = "DO"
                                        break
                                }
                            })
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            } else {
                storeAsGet(
                    "/promote/set/page?page=" +
                        this.cur_page +
                        "&size=" +
                        this.pageSize +
                        "&orgType=" +
                        this.select_orgType +
                        "&province=" +
                        this.$route.query.province +
                        "&city=" +
                        this.$route.query.city +
                        "&startTime=" +
                        this.startTime +
                        "&endTime=" +
                        this.endTime +
                        "&timeType=" +
                        this.searchTime
                )
                    .then(res => {
                        this.pageNum = res.data.content.page.totalElements
                        this.list = res.data.content.page.content

                        Array.prototype.slice
                            .call(this.list)
                            .forEach((value, index) => {
                                value.dereceiveNum =
                                    value.receiveNum +
                                    value.addWechatNum +
                                    value.invalidNum +
                                    value.tailAfterNum +
                                    value.errorNum +
                                    value.repeatNum
                                value.somereceiveNum =
                                    value.receiveNum +
                                    value.addWechatNum +
                                    value.invalidNum +
                                    value.tailAfterNum
                                let rateMon =
                                    value.dereceiveNum - value.invalidNum

                                this.salcTotalObj.addWechatNumAll +=
                                    value.addWechatNum
                                this.salcTotalObj.dereceiveNumAll +=
                                    value.dereceiveNum
                                this.salcTotalObj.repeatNumAll +=
                                    value.repeatNum
                                this.salcTotalObj.errorNumAll += value.errorNum
                                this.salcTotalObj.invalidNumAll +=
                                    value.invalidNum

                                if (rateMon == 0 || value.dereceiveNum == 0) {
                                    value.rate = Number(0).toFixed(2) + "%"
                                    value.rateAll = Number(0).toFixed(2) + "%"
                                } else {
                                    value.rate =
                                        Number(
                                            (value.addWechatNum /
                                                (value.dereceiveNum -
                                                    value.repeatNum -
                                                    value.errorNum -
                                                    value.invalidNum)) *
                                                100
                                        ).toFixed(2) + "%"
                                    value.rateAll =
                                        Number(
                                            (value.addWechatNum /
                                                (value.dereceiveNum -
                                                    value.repeatNum -
                                                    value.errorNum)) *
                                                100
                                        ).toFixed(2) + "%"
                                }
                                switch (value.orgType) {
                                    case "BEIFACE":
                                        value.orgType = "贝颜"
                                        break
                                    case "DIOUO":
                                        value.orgType = "DO"
                                        break
                                }
                            })
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            }
        },
        // 改变是否启用状态
        showStatus(val) {
            this.select_orgType = val
            this.getSpreadList(0, 2)
            // console.log(val,"启用")
        },
        timeSelectFn(val) {
            this.cur_page = 1
            this.searchTime = val
            this.getSpreadList(0, 2)
        },
        dataSelectFn(data) {
            //日期搜索预约列表
            let startTime =
                formatDate(new Date(), "yyyy-MM-dd hh:mm:ss").substring(0, 10) +
                " 00:00:00"
            let endTime =
                formatDate(new Date(), "yyyy-MM-dd hh:mm:ss").substring(0, 10) +
                " 23:59:59"
            if (!data) {
                let data = []
                data[0] = startTime
                data[1] = endTime
                this.startTime = data[0]
                this.endTime = data[1]
                this.findStartTimeValue = data
            } else {
                this.startTime = formatDate(data[0], "yyyy-MM-dd hh:mm:ss")
                this.endTime = formatDate(data[1], "yyyy-MM-dd hh:mm:ss")
            }
            this.cur_page = 1
            this.getSpreadList(0, 2)

            console.log(this.findStartTimeValue, "findStartTimeValue")
        },
        //查询品牌
        // selectOrgType(){
        //     this.getSpreadList(0,2);
        // },
        //省
        // getProareaList(){
        //     proareaList().then(res => {
        //         this.provinceData = res.data.content.provinceList;
        //     });
        // },
        //市
        getcityList() {
            storeAsGet(
                "/promote/area/province/city?province=" +
                    this.$route.query.province
            )
                .then(res => {
                    // this.cityData = res.data.content.promoteAreaList;
                    res.data.content.promoteAreaList.map(item => {
                        if (item.city == this.$route.query.city) {
                            this.select_city_id = item.id
                            this.select_city = item.city
                            console.log(item.city, "item.city")
                        }
                    })
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        // 添加设置
        addSetting() {
            this.spreadAddress = ''
            this.addSpreadDialog = true
            this.ifEdit = false
            this.addForm_data = {}
            this.$set(this.addForm_data, "city", this.$route.query.city)
            this.$set(this.addForm_data, "orgType", "BEIFACE")
        },
        //修改设置
        editFn(e, val) {
            // console.log(e,val)
            this.ifEdit = true
            this.spreadId = val.id
            storeAsGet("/promote/set?id=" + val.id).then(res => {
                // console.log(res,"222")
                this.addForm_data = res.data.content.entity
                this.addSpreadDialog = true
                this.spreadAddress =
                    this.$ajaxBase +
                    "promote/wishBill/GDT/new/" +
                    res.data.content.entity.id

                storeAsGet(
                    "/promote/area/province/city?province=" +
                        res.data.content.entity.province
                )
                    .then(res => {
                        this.select_city_id =
                            res.data.content.promoteAreaList[0].id
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            })
        },
        // 保存编辑
        saveEdit() {
            console.log(this.select_city_id, this.select_city, "225")
            this.trueForm = {
                accountId: this.addForm_data.accountId,
                accountName: this.addForm_data.accountName,
                landPageName: this.addForm_data.landPageName,
                landPageUrl: this.addForm_data.landPageUrl,
                orgType: this.addForm_data.orgType,
                servingProduct: this.addForm_data.servingProduct,
                promoteArea: {
                    id: ""
                }
            }
            this.$set(this.trueForm.promoteArea, "id", this.select_city_id)
            // console.log(this.trueForm.promoteArea.id,"238")
            // this.trueForm.promoteArea.id = this.select_city_id;
            // 判断是否为编辑，调用不同接口
            if (this.ifEdit) {
                storeAsPut(
                    "/promote/set/detail?promoteSetId=" + this.spreadId,
                    this.trueForm
                )
                    .then(res => {
                        this.addSpreadDialog = false
                        this.$message.success(`修改成功`)
                        this.getSpreadList(0, 2)
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            } else {
                if (this.spreadAddress) {
                    this.$message.warning("请勿重复生成！")
                    return false
                }
                storeAsPost(this.trueForm, "/promote/set/detail")
                    .then(res => {
                        // this.addSpreadDialog = false;
                        console.log(res)

                        this.$message.success("添加成功！")
                        this.spreadAddress =
                            this.$ajaxBase +
                            "promote/wishBill/GDT/new/" +
                            res.data.content.detail.id
                        this.getSpreadList(0, 2)
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            }
            // console.log(this.trueForm)
        },
        //查看详情
        // bandFn(e,val) {
        //     // console.log(e,val)
        //     this.$router.push('/extendDetail');
        // },

        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val
            this.getSpreadList(val - 1, 2)
        },
        handleSelectionChange(val) {
            // console.log(val,"handleSelectionChange")
            // this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getSpreadList(0, 2)
            // console.log(val,111111)
        },
        /* 重写计算总数 */
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计"
                    return
                }
                if (column.property == "landPageUrl") {
                    sums[index] = ""
                    return
                }
                /* 计算成交率的 key 标识 */
                if (column.property == "rate" || column.property == "rateAll") {
                    let totalObj = this.salcTotalObj
                    console.log(totalObj)
                    if (!totalObj) {
                        return false
                    }
                    let temp =
                        totalObj.dereceiveNumAll -
                        totalObj.repeatNumAll -
                        totalObj.errorNumAll -
                        totalObj.invalidNumAll
                    let tempAll =
                        totalObj.dereceiveNumAll -
                        totalObj.repeatNumAll -
                        totalObj.errorNumAll
                    if (column.property == "rate") {
                        console.log()
                        if (temp == 0) {
                            sums[index] = "0.00%"
                            return
                        }
                        sums[index] =
                            Number(
                                (totalObj.addWechatNumAll / temp) * 100
                            ).toFixed(2) + "%"
                    } else {
                        if (tempAll == 0) {
                            sums[index] = "0.00%"
                            return
                        }
                        sums[index] =
                            Number(
                                (totalObj.addWechatNumAll / tempAll) * 100
                            ).toFixed(2) + "%"
                    }
                    return
                }
                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    sums[index] += ""
                } else {
                    sums[index] = ""
                }
            })

            return sums
        }
    }
}
</script>

<style scoped>
.store {
    position: relative;
}
.store .store_title {
    height: 40px;
}
.store .store_title div {
    line-height: 40px;
}
.store .mainBtn {
    position: absolute;
    right: 0;
    top: 0;
}
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.extend_form .ex_input {
    width: 300px;
}
.ex_input_city {
    width: 150px;
}
.ex_parent {
    padding: 10px;
    border: 1px solid #c0ccda;
    margin: 5px 0;
}
.ex_parent > div {
    padding: 10px;
    padding-left: 0;
    padding-top: 0;
}
.ex_input_f,
.ex_input_y {
    width: 100px;
}
.ex_input_tip {
    display: inline-block;
    font-size: 12px;
    color: red;
}
</style>
